<template>
	<view class="comment-item">
		<view class="comment-item-top">
			<view class="user-wrap">
				<view class="user-icon">
					<base-img :src='item.user.avatar' v-if='item.user.avatar'></base-img>
					<base-img src='/static/user/user-default.png' v-else></base-img>
				</view>
				<view class="user-info">
					<view class="user-nick">{{item.user.nickname}}</view>
					<view class="rate-con">
						<uni-rate :readonly="true" active-color="#FF5F4D" :value="item.star" size="16"/>
					</view>
				</view>
			</view>
			<view class="time">{{item.create_time}}</view>
		</view>
		<view class="comment-text">
			{{item.desc}}
		</view>
		<view class="comment-img">
			<view class="comment-img-item" v-for='(img_item,img_index) in item.picture' :key="img_index">
				<base-img :src="img_item"></base-img>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"comment-item",
		props:{
			item:Object
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	.comment-item-top{
		display: flex;
		justify-content: space-between;
		.user-wrap{
			display: flex;
			align-items: center;
			.user-icon{
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
				overflow: hidden;
				background: red;
				margin-right: 26rpx;
			}
			.user-info{
				flex:1;
				overflow: hidden;
				.user-nick{
					width: 100%;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-size: 28rpx;
				}
			}
		}
		.time{
			font-size: 24rpx;
			color: #DEDBDB;
			padding-top:10rpx;
		}
	}
	.comment-text{
		width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 44rpx;
		margin-top:32rpx;
	}
	.comment-img{
		display: grid;
		grid-template-columns: repeat(4, 156rpx);
		justify-content: space-between;
		margin-top:24rpx;
		row-gap: 12rpx;
		.comment-img-item{
			width: 100%;
			height: 156rpx;
			border-radius: 8rpx;
			overflow: hidden;
		}
	}
</style>